<template >
  <div class="history">
      <h1>历史抽奖记录</h1>
      <div v-if="drawList.length === 0">
        <el-empty description="wc,一个历史都没有"></el-empty>
      </div>
      <div class="main"  v-else>
        <el-row>
          <el-col  :xs="24" :sm="12" :md="8" :lg="6"  v-for="draw in this.drawList" :key="draw.id">
            <div class="detail">
              <ul>
                <li>
                  <!-- 活动详情图 -->
                  <img src="../assets/img/carousel.jpg" alt="" />
                  <!-- 活动详情信息 -->
                  <div class="info">
                    <p>{{draw.title}}</p>
                    <span>{{ draw.remark }}</span>
                    <el-button @click="open(draw.id)">进入详情</el-button>
                  </div>
                </li>
              </ul>
            </div>
          </el-col>
        </el-row>
    </div>
  </div>
</template>

<script>

export default {
  name: 'History',
  data() {
    return {
      userId: "",
      drawList: []
    }
  },
  methods: {
    open(id){
      this.$router.push({path: '/draw/'+id})
    }
  },
  created() {
    this.$axios.get("/sys/userInfo").then(res => {
      this.userId = res.data.data.id
      this.$axios.get("/draw/getUserDrawById/"+this.userId).then(res => {
        this.drawList = res.data.data
      })
    })

  },
};
</script>
<style scoped>
    .history {
  width: 95%;
  border-radius: 20px;
  background-color: #e5e5e5;
  box-shadow: 5px 5px 5px rgba(153, 153, 153, .5);
  margin: 0 auto;
  padding-top: 20px;
  /* padding-bottom: 50px; */
}
h1{
  text-align: center;
  margin-bottom: 50px;
}

    li {
      list-style-type:none;
      width: 90%;
      float: left;
      border-radius: 10px;
      margin-bottom: 5%;
      box-shadow: 5px 5px 5px #999;
      margin-left: 4%;
      padding-bottom: 30px;
      background: #fff;
    }
    li img {
      width: 100%;
      border-radius: 15px;
    }
    .info p {
      font-size: 18px;
      margin-left: 5%;
    }
    .info span {
      color: #999;
      font-size: 12px;
      margin-left: 5%;
    }
    .info button {
      border-radius: 10px;
      color: #fff;
      background: #f91818;
      float: right;
      margin-right: 10%;
    }
</style>
